<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <title>Document</title>
</head>

<script>

    window.onload = function(){
        // 获取canvas
        var canvas = document.getElementById('canvas');
        // 获取2d图形上下文对象
        var context = canvas.getContext('2d');
        
        // 创建渐变对象
        var gradient = context.createLinearGradient(0, 0, 300, 300);
        // 设置渐变色
        gradient.addColorStop(0, '#0808ff');
        gradient.addColorStop(0.5, '#faf53b');
        gradient.addColorStop(1, '#f96a5c');
        // 将渐变对象设置到填充样式中
        context.fillStyle = gradient;

        for(var i=1;i<300;i += 30){
            drawCircle(i,i,i/2)
        }
        
        // 封装绘制圆形的函数
        function drawCircle(x,y,radius){
            // 开始路径
            context.beginPath();
            // 设置路径
            context.arc(x,y, radius, Math.PI / 180 * 0, Math.PI / 180 * 360);
            // 结束路径
            context.closePath();

            // 填充路径,绘制图形
            context.fill();
        }
    }
</script>
<body>
    <canvas id="canvas" width="600" height="600" style="border:1px solid #333"></canvas>
   
    
</body>

</html>